.uploadCard {
  max-width: 800px;
  margin: 24px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

  :global {
    .ant-card-body {
      padding: 24px;
    }

    .ant-form-item-label {
      font-weight: 500;
    }

    // 上传区域样式
    .ant-upload-drag {
      border: 2px dashed #d9d9d9;
      border-radius: 8px;
      background: #fafafa;
      transition: all 0.3s ease;

      &:hover {
        border-color: #1890ff;
      }

      .ant-upload-drag-icon {
        color: #1890ff;
        font-size: 48px;
        margin-bottom: 16px;
      }

      .ant-upload-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 8px;
      }

      .ant-upload-hint {
        color: #666;
        font-size: 14px;
      }
    }

    // 表单控件样式
    .ant-input,
    .ant-select-selector,
    .ant-input-textarea {
      border-radius: 6px;
    }

    .ant-input:focus,
    .ant-select-focused .ant-select-selector {
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }

    // 提交按钮样式
    .ant-btn {
      height: 40px;
      font-size: 16px;
      border-radius: 6px;
    }
  }
}

// 标签区域样式
.tagArea {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  padding: 4px 0;

  :global {
    .ant-tag {
      margin: 0;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
      display: flex;
      align-items: center;
      background: #f5f5f5;
      border: none;
      color: #666;

      &:hover {
        background: #e6f7ff;
        color: #1890ff;
      }

      .anticon-close {
        margin-left: 4px;
      }
    }
  }
}

// 新标签输入框样式
.tagInput {
  width: 80px;
  margin-right: 8px;
  vertical-align: top;
}

// 新增标签按钮样式
.newTag {
  background: #fff;
  border-style: dashed;
  cursor: pointer;

  &:hover {
    border-color: #1890ff;
    color: #1890ff;
  }
}

// 预览图片样式
.previewImage {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  margin: 16px 0;
  border-radius: 4px;
}

// 响应式调整
@media screen and (max-width: 576px) {
  .uploadCard {
    margin: 16px;

    :global {
      .ant-card-body {
        padding: 16px;
      }

      .ant-upload-drag-icon {
        font-size: 36px;
        margin-bottom: 12px;
      }

      .ant-upload-text {
        font-size: 14px;
      }

      .ant-upload-hint {
        font-size: 12px;
      }

      .ant-btn {
        height: 36px;
        font-size: 14px;
      }
    }
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .uploadCard {
    background: #1f1f1f;

    :global {
      .ant-upload-drag {
        background: #141414;
        border-color: #434343;

        &:hover {
          border-color: #177ddc;
        }

        .ant-upload-text {
          color: #fff;
        }

        .ant-upload-hint {
          color: #999;
        }
      }

      .ant-form-item-label > label {
        color: #fff;
      }

      .ant-input,
      .ant-select-selector,
      .ant-input-textarea {
        background: #141414;
        border-color: #434343;
        color: #fff;

        &:hover,
        &:focus {
          border-color: #177ddc;
        }
      }
    }
  }

  .tagArea {
    :global {
      .ant-tag {
        background: #2f2f2f;
        color: #999;

        &:hover {
          background: #177ddc;
          color: #fff;
        }
      }
    }
  }

  .newTag {
    background: #1f1f1f;
    border-color: #434343;
    color: #999;

    &:hover {
      border-color: #177ddc;
      color: #177ddc;
    }
  }
}

// 加载状态样式
.uploading {
  opacity: 0.7;
  pointer-events: none;
}

// 错误状态样式
.error {
  :global {
    .ant-upload-drag {
      border-color: #ff4d4f;
      
      &:hover {
        border-color: #ff7875;
      }
    }
  }
}

// 成功状态样式
.success {
  :global {
    .ant-upload-drag {
      border-color: #52c41a;
      
      &:hover {
        border-color: #73d13d;
      }
    }
  }
}